<template lang="html">
  <div class="myNav">
    <ul>
      <router-link to='/home'>
      <i class="icon-font icon-shouye"></i>
      <span class="title">首页</span>
      </router-link> 
      <router-link to='/shoppingCart'>
      <i class="iconfont icon-gouwuche"></i>
      <span class="title">购物车</span>
      </router-link>
      <router-link to='/order'>
      <i class="iconfont icon-wodedingdan"></i>
      <span class="title">订单</span>
      </router-link>
      <router-link to='/mine'>
      <i class="iconfont icon-wodejuhuasuan"></i>
      <span class="title">我的</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
// import '../../src/assets/iconfont.css'
import "../../assets/iconfont.css"
export default {
  name: 'myNav',
  data() { 
    return {

    }
  }
 }
</script>

<style lang="" scoped>
  .myNav{
    position:fixed;
    left: 0;
    right: 0;
    bottom:0;
    height: 40px;
    padding: 10px;
    background: #fff;
  }
  .myNav ul{
    height: 50px;
    width:100%;
    display: flex;
  }
  .myNav ul a{
    flex:1;
    text-align: center;
    /* color:#333; */
    text-decoration: none;
  }
  .myNav ul a i{
  font-size: 20px;
  } 
  .title{
  display: block;
  margin-top: 8px;
  font-size: 12px;
}
.active{
  color: #39ac69;
}
/* .router-link-active{
  color:#e4393c !important;
} */
</style>